<template>
  <a-layout class="layout-demo" style="height: 100vh">
    <a-layout-sider hide-trigger collapsible :collapsed="collapsed">
      <div style="display: flex" class="logo">
        <img src="../assets/logo.png" />
        <h1 v-if="!collapsed">xxxxx管理系统</h1>
      </div>
      <a-menu
        :style="{ width: '100%' }"
        @menu-item-click="doMenuClick"
        :selected-keys="selectedKeys"
      >
        <a-menu-item v-for="item in visibleRoutes" :key="item.path">
          <IconHome v-show="item.name == '首页'" />
          <icon-user-group v-show="item.name == '用户管理'" />
          <icon-history v-show="item.name == '预约信息管理'" />
          <icon-layout v-show="item.name == '预算资金详情'" />
          <icon-notification v-show="item.name == '打卡信息管理'" />
          <icon-empty v-show="item.name == '采购信息管理'" />
          <icon-code-square v-show="item.name == '请假信息'" />
          <icon-idcard v-show="item.name == '辞工信息管理'" />
          <icon-pen v-show="item.name == '提交工作计划'" />
          <icon-thunderbolt v-show="item.name == '施工进度管理'" />
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="padding-left: 20px">
        <div
          style="float: right; margin-right: 10px"
          v-if="loginUserStore.loginUser.id"
        >
          <a-dropdown trigger="hover">
            <a-avatar
              trigger-type="mask"
              @click="showChange"
              :image-url="loginUserStore.loginUser.userAvatar"
              size="40"
            >
              <template #trigger-icon>
                <span style="font-size: 10px">修改头像</span>
              </template>
            </a-avatar>
            <template #content>
              <a-doption @click="router.push('/personal')">
                <svg
                  t="1723874630233"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4273"
                  width="16"
                  height="16"
                >
                  <path
                    d="M540.842397 542.300097"
                    fill="#2c2c2c"
                    p-id="4274"
                  ></path>
                  <path
                    d="M256.722454 336.343351c0-137.247874 113.578802-248.478188 253.686816-248.478188 140.119271 0 253.686816 111.230314 253.686816 248.478188 0 137.226385-113.567545 248.473071-253.686816 248.473071C370.307396 584.821539 256.722454 473.568712 256.722454 336.343351L256.722454 336.343351 256.722454 336.343351zM211.951785 336.343351c0 117.863385 71.251787 219.473597 173.847443 265.72806-172.775019 48.938596-302.560944 197.078541-320.840262 377.394303l44.989657 0c22.275329-197.319018 193.054901-350.796528 400.459624-350.796528s378.189412 153.476487 400.460648 350.796528l44.989657 0C937.591513 799.148929 807.793308 651.010007 635.020336 602.071412c102.594633-46.249347 173.85256-147.864676 173.85256-265.72806 0-161.450089-133.629463-292.324812-298.462602-292.324812C345.572038 44.017516 211.951785 174.888146 211.951785 336.343351L211.951785 336.343351 211.951785 336.343351zM211.951785 336.343351"
                    fill="#2c2c2c"
                    p-id="4275"
                  ></path>
                </svg>
                个人主页
              </a-doption>
              <a-doption v-if="loginUserStore.loginUser.userRole == 'user'">
                <svg
                  t="1723874733201"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5927"
                  width="16"
                  height="16"
                >
                  <path
                    d="M352 88V192h-48V88a24 24 0 0 1 48 0zM304 240h48v56a24 24 0 0 1-48 0z m368-48v48h48v-48z"
                    fill="#2c2c2c"
                    p-id="5928"
                  ></path>
                  <path
                    d="M960 256v640a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V256a64 64 0 0 1 64-64h544v48H128a16 16 0 0 0-16 16v640a16 16 0 0 0 16 16h768a16 16 0 0 0 16-16V256a16 16 0 0 0-16-16H720v-48h176a64 64 0 0 1 64 64z"
                    fill="#2c2c2c"
                    p-id="5929"
                  ></path>
                  <path
                    d="M936 400h-832a24 24 0 0 0 0 48h832a24 24 0 0 0 0-48zM720 88v208a24 24 0 0 1-48 0v-208a24 24 0 0 1 48 0z"
                    fill="#2c2c2c"
                    p-id="5930"
                  ></path>
                  <path
                    d="M737.28 567.04a16 16 0 0 1 0 22.72L499.68 827.36a16 16 0 0 1-22.56 0l-158.4-158.4a16 16 0 0 1 22.56-22.72l147.2 147.2 226.24-226.4a16 16 0 0 1 22.56 0z"
                    fill="#2c2c2c"
                    p-id="5931"
                  ></path>
                </svg>
                我的预约
              </a-doption>
              <a-doption>
                <svg
                  t="1723874930950"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7987"
                  width="16"
                  height="16"
                >
                  <path
                    d="M265.728 193.92c-28.8 20.096-54.4 42.88-76.8 68.224-22.4 25.472-41.6 52.864-57.6 82.304s-28.16 60.672-36.48 93.696c-8.32 32.896-12.416 66.304-12.416 100.224 0 58.368 11.392 113.152 34.048 164.224 22.784 51.2 53.504 95.744 92.16 133.632 38.784 38.016 84.224 68.096 136.32 90.368C397.056 948.864 452.992 960 512.512 960c58.88 0 114.432-11.136 166.528-33.408 52.224-22.272 97.792-52.352 136.832-90.368 39.04-38.016 69.76-82.56 92.16-133.632 22.4-51.2 33.664-105.856 33.664-164.224 0-33.28-3.968-65.92-12.032-97.92s-19.328-62.464-34.048-91.264c-14.72-28.8-33.024-55.808-54.784-80.896-21.76-25.088-46.08-47.744-72.96-67.712-14.08-9.984-29.312-13.824-45.568-11.264-16.256 2.56-29.568 10.368-39.808 23.552-10.24 13.184-14.08 27.904-11.52 44.288 2.56 16.256 10.624 29.44 24.064 39.552 40.32 28.928 71.168 64.256 92.672 106.368 21.376 41.984 32.128 87.168 32.128 135.552 0 41.344-7.936 80.512-24.064 117.12-16 36.736-37.888 68.736-65.792 96-27.904 27.264-60.544 48.896-97.92 64.896-37.504 16-77.312 23.936-119.552 23.936-42.24 0-82.048-7.936-119.552-23.936-37.504-16-70.144-37.632-97.92-64.896-27.776-27.264-49.92-59.264-66.304-96s-24.448-75.776-24.448-117.12c0-48.896 11.52-95.232 34.56-138.88 23.04-43.648 55.424-79.488 97.024-107.776 14.08-9.472 22.528-22.272 25.472-38.528 2.944-16.256-0.512-31.36-10.112-45.184-9.6-13.184-22.784-21.12-39.424-24.064-16.64-3.072-32 0.256-46.08 9.728z m246.784 347.264c16.64 0 30.848-5.76 42.752-17.408 11.904-11.648 17.792-25.6 17.792-41.856V124.288c0-16.256-5.888-30.464-17.792-42.368S529.152 64 512.512 64c-17.28 0-31.872 6.016-43.648 17.92-11.904 11.904-17.792 25.984-17.792 42.368V481.92c0 16.256 5.888 30.336 17.792 41.856 11.776 11.648 26.368 17.408 43.648 17.408z"
                    p-id="7988"
                    fill="#d81e06"
                  ></path>
                </svg>
                <a-button @click="deleteUser">退出登录</a-button>
              </a-doption>
            </template>
          </a-dropdown>
        </div>
        <a-button shape="round" @click="onCollapse">
          <IconCaretRight v-if="collapsed" />
          <IconCaretLeft v-else />
        </a-button>
      </a-layout-header>
      <a-layout style="padding: 0 24px">
        <a-breadcrumb :style="{ margin: '16px 0' }">
          <a-breadcrumb-item>{{ route.name }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content>
          <router-view />
        </a-layout-content>
        <a-layout-footer style="color: red">xxxxxxx</a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 上传头像 </template>
    <div>
      <a-space direction="vertical" :style="{ width: '100%' }">
        <a-upload
          :with-credentials="true"
          action="http://localhost:8101/api/user/update/myload"
          :fileList="file ? [file] : []"
          :show-file-list="false"
          @change="onChange"
          @progress="onProgress"
          :onSuccess="onSuccess"
        >
          <template #upload-button>
            <div
              :class="`arco-upload-list-item${
                file && file.status === 'error'
                  ? ' arco-upload-list-item-error'
                  : ''
              }`"
            >
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="file && file.url"
              >
                <img :src="file.url" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
                <a-progress
                  v-if="file.status === 'uploading' && file.percent < 100"
                  :percent="file.percent"
                  type="circle"
                  size="mini"
                  :style="{
                    position: 'absolute',
                    left: '50%',
                    top: '50%',
                    transform: 'translateX(-50%) translateY(-50%)',
                  }"
                />
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                  <div style="margin-top: 10px; font-weight: 600">Upload</div>
                </div>
              </div>
            </div>
          </template>
        </a-upload>
      </a-space>
    </div>
  </a-modal>
</template>
<script setup>
import { computed, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Message } from "@arco-design/web-vue";
import {
  IconCaretRight,
  IconCaretLeft,
  IconHome,
  IconHistory,
  IconLayout,
  IconNotification,
  IconEmpty,
  IconCodeSquare,
  IconIdcard,
  IconPen,
  IconUserGroup,
  IconThunderbolt,
  IconEdit,
  IconPlus,
} from "@arco-design/web-vue/es/icon";
import { routes } from "@/router/router";
import checkAccess from "@/access/checkAccess";
import { userLoginUserStore } from "@/store/user";
import message from "@arco-design/web-vue/es/message";
const loginUserStore = userLoginUserStore();
const router = useRouter();
const route = useRoute();
const selectedKeys = ref(["/"]);
const doMenuClick = (key) => {
  router.push({ path: key });
};
router.afterEach((to) => {
  selectedKeys.value = [to.path];
});

const visibleRoutes = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    if (!checkAccess(loginUserStore.loginUser, item.meta?.access)) {
      return false;
    }
    if (item.name == "联系我们") return false;
    return true;
  });
});

const collapsed = ref(false);
const onCollapse = () => {
  collapsed.value = !collapsed.value;
};

const deleteUser = () => {
  loginUserStore.deleteLoginUser();
  Message.success("已退出");
  router.push({ path: "/user/login" });
};
const visible = ref(false);

const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const showChange = () => {
  visible.value = true;
};
const onSuccess = (response) => {
  if (response.response.code === 0) {
    message.success("上传成功");
    loginUserStore.loginUser.userAvatar = response.response.data;
    visible.value = false;
  }
};
</script>
<style scoped>
.layout-demo {
  height: 500px;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
h1 {
  color: black;
  font-size: 20px;
  line-height: 10px;
}
</style>
